<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
            <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>

</head>
<body>
    <div id="ad6346b965d14caf87d1b69e75407168" class="chart-container" style="width:900px; height:500px;"></div>
    <script>
        var chart_ad6346b965d14caf87d1b69e75407168 = echarts.init(
            document.getElementById('ad6346b965d14caf87d1b69e75407168'), 'white', {renderer: 'canvas'});
        var option_ad6346b965d14caf87d1b69e75407168 = {
    "baseOption": {
        "series": [
            {
                "type": "bar",
                "name": "\u5546\u5bb6A",
                "data": [
                    81,
                    86,
                    55,
                    89,
                    87,
                    104,
                    115
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "right",
                    "margin": 8
                }
            },
            {
                "type": "bar",
                "name": "\u5546\u5bb6B",
                "data": [
                    45,
                    115,
                    69,
                    130,
                    133,
                    105,
                    119
                ],
                "barCategoryGap": "20%",
                "label": {
                    "show": true,
                    "position": "right",
                    "margin": 8
                }
            }
        ],
        "timeline": {
            "axisType": "category",
            "orient": "horizontal",
            "autoPlay": false,
            "controlPosition": "left",
            "loop": true,
            "rewind": false,
            "show": true,
            "inverse": false,
            "bottom": "-5px",
            "data": [
                "2015\u5e74",
                "2016\u5e74",
                "2017\u5e74",
                "2018\u5e74",
                "2019\u5e74"
            ]
        },
        "xAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "yAxis": [
            {
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "\u5468\u4e00",
                    "\u5468\u4e8c",
                    "\u5468\u4e09",
                    "\u5468\u56db",
                    "\u5468\u4e94",
                    "\u5468\u516d",
                    "\u5468\u65e5"
                ]
            }
        ]
    },
    "options": [
        {
            "legend": [
                {
                    "data": [
                        "\u5546\u5bb6A",
                        "\u5546\u5bb6B"
                    ],
                    "selected": {
                        "\u5546\u5bb6A": true,
                        "\u5546\u5bb6B": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6A",
                    "data": [
                        126,
                        137,
                        99,
                        120,
                        119,
                        29,
                        42
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                },
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6B",
                    "data": [
                        72,
                        90,
                        87,
                        85,
                        104,
                        63,
                        129
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "yAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "\u53ef\u4e50",
                        "\u96ea\u78a7",
                        "\u6a59\u6c41",
                        "\u7eff\u8336",
                        "\u5976\u8336",
                        "\u767e\u5a01",
                        "\u9752\u5c9b"
                    ]
                }
            ],
            "title": [
                {
                    "text": "Timeline-Bar-Reversal (\u65f6\u95f4: 2015 \u5e74)",
                    "padding": 5,
                    "itemGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ]
        },
        {
            "legend": [
                {
                    "data": [
                        "\u5546\u5bb6A",
                        "\u5546\u5bb6B"
                    ],
                    "selected": {
                        "\u5546\u5bb6A": true,
                        "\u5546\u5bb6B": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6A",
                    "data": [
                        25,
                        40,
                        72,
                        59,
                        61,
                        106,
                        123
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                },
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6B",
                    "data": [
                        43,
                        83,
                        127,
                        45,
                        146,
                        95,
                        75
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "yAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "\u8349\u8393",
                        "\u8292\u679c",
                        "\u8461\u8404",
                        "\u96ea\u68a8",
                        "\u897f\u74dc",
                        "\u67e0\u6aac",
                        "\u8f66\u5398\u5b50"
                    ]
                }
            ],
            "title": [
                {
                    "text": "Timeline-Bar-Reversal (\u65f6\u95f4: 2016 \u5e74)",
                    "padding": 5,
                    "itemGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ]
        },
        {
            "legend": [
                {
                    "data": [
                        "\u5546\u5bb6A",
                        "\u5546\u5bb6B"
                    ],
                    "selected": {
                        "\u5546\u5bb6A": true,
                        "\u5546\u5bb6B": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6A",
                    "data": [
                        128,
                        37,
                        32,
                        30,
                        32,
                        52,
                        81
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                },
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6B",
                    "data": [
                        95,
                        90,
                        106,
                        136,
                        96,
                        54,
                        75
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "yAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "\u6cb3\u9a6c",
                        "\u87d2\u86c7",
                        "\u8001\u864e",
                        "\u5927\u8c61",
                        "\u5154\u5b50",
                        "\u718a\u732b",
                        "\u72ee\u5b50"
                    ]
                }
            ],
            "title": [
                {
                    "text": "Timeline-Bar-Reversal (\u65f6\u95f4: 2017 \u5e74)",
                    "padding": 5,
                    "itemGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ]
        },
        {
            "legend": [
                {
                    "data": [
                        "\u5546\u5bb6A",
                        "\u5546\u5bb6B"
                    ],
                    "selected": {
                        "\u5546\u5bb6A": true,
                        "\u5546\u5bb6B": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6A",
                    "data": [
                        78,
                        145,
                        139,
                        139,
                        118,
                        26,
                        95
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                },
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6B",
                    "data": [
                        121,
                        76,
                        48,
                        72,
                        45,
                        94,
                        34
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "yAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "\u886c\u886b",
                        "\u6bdb\u8863",
                        "\u9886\u5e26",
                        "\u88e4\u5b50",
                        "\u98ce\u8863",
                        "\u9ad8\u8ddf\u978b",
                        "\u889c\u5b50"
                    ]
                }
            ],
            "title": [
                {
                    "text": "Timeline-Bar-Reversal (\u65f6\u95f4: 2018 \u5e74)",
                    "padding": 5,
                    "itemGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ]
        },
        {
            "legend": [
                {
                    "data": [
                        "\u5546\u5bb6A",
                        "\u5546\u5bb6B"
                    ],
                    "selected": {
                        "\u5546\u5bb6A": true,
                        "\u5546\u5bb6B": true
                    },
                    "show": true,
                    "padding": 5,
                    "itemGap": 10,
                    "itemWidth": 25,
                    "itemHeight": 14
                }
            ],
            "series": [
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6A",
                    "data": [
                        81,
                        86,
                        55,
                        89,
                        87,
                        104,
                        115
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                },
                {
                    "type": "bar",
                    "name": "\u5546\u5bb6B",
                    "data": [
                        45,
                        115,
                        69,
                        130,
                        133,
                        105,
                        119
                    ],
                    "barCategoryGap": "20%",
                    "label": {
                        "show": true,
                        "position": "right",
                        "margin": 8
                    }
                }
            ],
            "xAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    }
                }
            ],
            "yAxis": [
                {
                    "show": true,
                    "scale": false,
                    "nameLocation": "end",
                    "nameGap": 15,
                    "gridIndex": 0,
                    "inverse": false,
                    "offset": 0,
                    "splitNumber": 5,
                    "minInterval": 0,
                    "splitLine": {
                        "show": false,
                        "lineStyle": {
                            "show": true,
                            "width": 1,
                            "opacity": 1,
                            "curveness": 0,
                            "type": "solid"
                        }
                    },
                    "data": [
                        "\u5468\u4e00",
                        "\u5468\u4e8c",
                        "\u5468\u4e09",
                        "\u5468\u56db",
                        "\u5468\u4e94",
                        "\u5468\u516d",
                        "\u5468\u65e5"
                    ]
                }
            ],
            "title": [
                {
                    "text": "Timeline-Bar-Reversal (\u65f6\u95f4: 2019 \u5e74)",
                    "padding": 5,
                    "itemGap": 10
                }
            ],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ]
        }
    ]
};
        chart_ad6346b965d14caf87d1b69e75407168.setOption(option_ad6346b965d14caf87d1b69e75407168);
    </script>
</body>
</html>
